<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common::common_head(~{::title},~{})">
    <title>家电库存管理系统登录页面</title>
</head>

<body>

<nav class="navbar navbar-transparent navbar-absolute">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">家电库存管理系统登录页面</a>
        </div>
    </div>
</nav>

<div class="wrapper wrapper-full-page">
    <div class="full-page login-page" data-color="#b1ffff" data-image="/static/picture/full-screen-image-4.jpg">

        <!--   you can change the color of the filter page using: data-color="blue | azure | green | orange | red | purple" -->
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">
                        <form id="myForm" novalidate="">

                            <!--   if you want to have the card without animation please remove the ".card-hidden" class   -->
                            <div class="card card-hidden">
                                <div class="header text-center">家电库存管理系统</div>
                                <div class="content">
                                    <div class="form-group">
                                        <label>手机号</label>
                                        <input type="text" isMobile="true" required="required" name="phone"
                                               placeholder="请输入手机号" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>密码</label>
                                        <input type="password" required="required" name="password" placeholder="请输入密码"
                                               class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label class="checkbox">
                                            <input type="checkbox" data-toggle="checkbox" value="">
                                            记住我
                                        </label>
                                    </div>
                                </div>
                                <div class="footer text-center">
                                    <button type="submit" class="btn btn-primary btn-fill btn-wd">登录</button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
        </div>


    </div>

</div>

</body>
<script type="text/javascript">
    $().ready(function () {
        lbd.checkFullPageBackgroundImage();
        setTimeout(function () {
            // after 1000 ms we add the class animated to the login/register card
            $('.card').removeClass('card-hidden');
        }, 700);

        //重写验证规则，设置返回中文
        $.validator.messages.required = jQuery.validator.format("请填写必填字段");
        $.validator.messages.equalTo = jQuery.validator.format("两次密码输入不一致");
        jQuery.validator.addMethod("isMobile", function (value, element) {
            var length = value.length;
            return (length == 11 && /^(((1[0-9]{1}))+\d{9})$/.test(value));
        }, "请正确填写您的手机号码。");


        $('#myForm').validate({
            submitHandler: function (form) { //通过之后回调
                //进行ajax传值
                $.ajax({
                    data: $("#myForm").serialize(),
                    dataType: "text",
                    type: "post",
                    url: "/user/login",
                    success: function (data) {
                        console.log(data);
                        if (data == "1") {
                            window.location.href = "/page/index";
                        } else {
                            //$("#phoneText").val(data);
                            // alert(data);
                            swal("糟糕！", "手机号或密码错误，请重试", "error");
                        }
                    },
                    error: function () {
                        // alert("ajax错误");
                        swal("出错了！", "服务器通信失败，请检查网络状态", "error");
                    }
                });
            }
        });


    });
</script>
</html>
